﻿<%@ page language="java" import="net.sf.json.JSONArray,com.newcrm.config.Const,com.newcrm.config.Config,com.newcrm.util.Util,com.newcrm.bean.*,java.util.List,java.util.Map" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  User user = (User) session.getAttribute("user");
  Map<Integer, CompanyInfo> companys = (Map<Integer, CompanyInfo>) application.getAttribute(Const.APPLICATION_COMPANYS);
  CompanyInfo companyInfo = companys.get(Integer.valueOf(user.companyId));

  List<String[]> data = (List<String[]>) request.getAttribute("data");
  String jsonData = "[]";
  if (data != null) {
    jsonData = JSONArray.fromObject(data).toString();
  }
  int totalNum = Util.str2Int(request.getAttribute("totalNum"));
  double totalTime = totalNum * 0.04;
  Config typeConfig = Config.getInstance();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>导入客户信息确认页面</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/qikebao.ico" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/all.css?ver=<%=Const.VERSION%>">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/datepicker.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/magnific-popup.css">
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-ui.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.bootstrap-growl.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/moment.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/daterangepicker.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.magnific-popup.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.cookie.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/popbox.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/script/common.js?ver=<%=Const.VERSION%>"></script>
  <script>
    var data = <%=Util.UEncode2(jsonData)%>;
    var _currentPage = 0;
    function loadSampleData() {
      var _items = data[_currentPage];
      if (!_items) {
        return;
      }
      $("#mappingtable td.itemString").text("");
      for (var i = 0; i < _items.length; i++) {
        var _td = $("#mappingtable tr:eq(" + (i+1) + ") td.itemString" );
        if (_td) {
          _td.text(_items[i])
        }
      }
    }

    function trimSpace(str) {
      var v = "";
      for (var i = 0; i < str.length; i++) {
        var c = str.charAt(i);
        if (c == " " || c == "　") {
          continue;
        }
        v = v + c;
      }
      return v;
    }

    function changeProgressbar(v) {
      $("#progressbar").progressbar({ value: v});
      $("#currentUploadNum").text(v);
    }

    function finish(importId, successNum, existNum, errorNum, existCustomerIds) {
      $("#importId").val(importId);
      $("#successNum").val(successNum);
      $("#existNum").val(existNum);
      $("#existCustomerIds").val(existCustomerIds);
      $("#errorNum").val(errorNum);
      $("#resultFrom").submit();
    }

    $(function() {
      $("#partiesMenu").addClass("selected");

      $("#import_button").click(function(e){
        $("#import_form").submit();
      });

      $("#import_form").submit(function(event){
        $("#import_button").parent().addClass("busy");
        var hasName = false;
        $("#mappingtable tr").each(function(index) {
          var _sel = $(this).find("select");
          if (_sel.val() == "<%=Const.CUSTOMER_INFO_KEY_COMPANYNAME%>" || _sel.val() == "<%=Const.CUSTOMER_INFO_KEY_NAME%>") {
            hasName = true;
            return false;
          }
        });

        if (!hasName) {
          alert("导入的数据中，必须要包含公司名");
          $("#import_button").parent().removeClass("busy");
          return false;
        }

        $.magnificPopup.open({
          modal: true,
          items: {
            src: '#uploadProgress-popup',
            type: 'inline'
          }
        });
        return true;
      });
      $("#progressbar").progressbar({
        value: 0,
        max: <%=totalNum%>
      });
      $("#prev_link").click(function(e) {
        e.preventDefault();
        if (_currentPage <= 0) {
          return;
        }
        _currentPage = _currentPage - 1;
        loadSampleData();
      });
      $("#next_link").click(function(e) {
        e.preventDefault();
        if (_currentPage >= data.length) {
          return;
        }
        _currentPage = _currentPage + 1;
        loadSampleData();
      });
      $("#mappingtable select").change( function() {
        if ($(this).val() == "") {
          $(this).parent().parent().addClass("missing");
        } else {
          $(this).parent().parent().removeClass("missing");
        }
      });
      $("#mappingtable tr").each(function(index) {
        if (index == 0) {
          return true
        }
        var _tr = $(this);
        var _txt = _tr.find("td:eq(1)").text();
        if (_txt.length == 0) {
          return true;
        }
        _txt = trimSpace(_txt).toLowerCase();
        var _sel = _tr.find("select");
        _sel.find("option").each(function(index) {
          if (index <= 1) {
            return true;
          }
          var _name = $(this).text().toLowerCase();
          var _alias = $(this).attr("alias");
          if (_alias && (_alias != "")) {
            if ((_txt.indexOf(_alias) >= 0) || (_alias.indexOf(_txt) >= 0)) {
              $(this).attr("selected", true);
              _tr.removeClass("missing");
              return false;
            }
          }
          if ((_name == _txt) || (_txt.indexOf(_name) >= 0) || (_name.indexOf(_txt) >= 0)) {
            $(this).attr("selected", true);
            _tr.removeClass("missing");
            return false;
          }
        });
      });
    });
  </script>
</head>
<body class="parties former_sheet import_mapping">
  <jsp:include page="topNavi.jsp" flush="true"/>
  <div class="main-page">
    <table>
    <tr>
      <td class="main-body">
        <div class="topnavi"><div class="leftMenu"><span>导入客户信息</span></div></div>
        <div class="main-body-container">
          <div class="page_header"><h1>第二步：匹配需要导入的数据</h1></div>
          <div class="col">
            <div class="innercol">
              <form action="<%=request.getContextPath()%>/customerimports/save" id="import_form" target="import_iframe" method="post">
                <input type="hidden" name="visible" value="<%=request.getAttribute("visible")%>">
                <input type="hidden" name="permissionsId" value="<%=request.getAttribute("permissionsId")%>">
                <input type="hidden" name="filePath" value="<%=request.getAttribute("filePath")%>">
                <input type="hidden" name="fileType" value="<%=request.getAttribute("fileType")%>">
                <input type="hidden" name="fileName" value="<%=request.getAttribute("fileName")%>">
                <div class="flash_notice">合计 <span id="import_size"> <%=totalNum%> </span>个客户信息，导入需要花时约 <b><%=totalTime%></b> 秒。</div>
                <div class="message">
                  <h4>请选择导入数据对应匹配的字段信息</h4>
                  <p>
                    请您看下面表格，将要导入的数据与我们字段进行匹配，可以通过上一页/下一页，多看几条记录，确定匹配正确后再进行导入。</a>
                  </p>
                  <p class="alert_notice">
                    <i class="fa fa-exclamation-triangle"></i> 重要提示：黄色背景色的行，表示未匹配，该列数据将不会被导入到系统中。
                  </p>
                </div>
                <table class="mapping" id="mappingtable">
                  <tr>
                    <th>字段</th>
                    <th> <span>查看导入数据样例（前十条）:  <a href="#" id="prev_link">上一条</a>  |  <a href="#" id="next_link">下一条</a></span>您导入的数据</th>
                  </tr>
<%
  int itemIndex = 0;
  if ((data != null) && (data.size() > 0)) {
    for (String item:data.get(0)) {
%>                <tr class="missing">
                    <td width="1px">
                      <select name='mapping_<%=itemIndex%>'>
                      <option value=''>请选择...</option>
                      <option value=''>不导入该字段</option>
                      <option alias="分类" value="<%=Const.CUSTOMER_INFO_KEY_CATEGORY%>">客户分类</option>
                      <option alias="联系人" value="<%=Const.CUSTOMER_INFO_KEY_NAME%>">姓名</option>
                      <option value="<%=Const.CUSTOMER_INFO_KEY_TITLE%>">职位</option>
                      <option alias="公司介绍" value="<%=Const.CUSTOMER_INFO_KEY_BACKGROUND%>">简介</option>
                      <option value="<%=Const.CUSTOMER_INFO_KEY_COMPANYNAME%>">公司名</option>
                      <optgroup label="地址">
                        <option alias="地址" value="<%=Const.CUSTOMER_EXT_INFO_KEY_ADDRESS%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_ADDRESS%>_1">地址-工作</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_ADDRESS%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_ADDRESS%>_2">地址-家庭</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_ADDRESS%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_ADDRESS%>_3">地址-其他</option>
                      </optgroup>
                      <optgroup label="电话">
                        <option alias="电话,座机" value="<%=Const.CUSTOMER_EXT_INFO_KEY_PHONE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_PHONE%>_1">电话-工作</option>
                        <option alias="移动电话" value="<%=Const.CUSTOMER_EXT_INFO_KEY_PHONE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_PHONE%>_2">电话-手机</option>
                        <option alias="传真" value="<%=Const.CUSTOMER_EXT_INFO_KEY_PHONE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_PHONE%>_3">电话-传真</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_PHONE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_PHONE%>_4">电话-家庭</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_PHONE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_PHONE%>_5">电话-其他</option>
                      </optgroup>
                      <optgroup label="邮箱">
                        <option alias="邮箱" value="<%=Const.CUSTOMER_EXT_INFO_KEY_EMAIL%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_EMAIL%>_1">邮箱-工作</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_EMAIL%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_EMAIL%>_2">邮箱-家庭</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_EMAIL%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_EMAIL%>_3">邮箱-其他</option>
                      </optgroup>
                      <optgroup label="聊天工具">
<%
int idx = 0;
for (String type:typeConfig.imType) {%>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_IM%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_IM%>_<%=idx%>"><%=type%></option>
<%
  idx++;
}%>
                      </optgroup>
                      <optgroup label="网站">
                        <option alias="URL" value="<%=Const.CUSTOMER_EXT_INFO_KEY_WEBSITE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_WEBSITE%>_1">网站-工作</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_WEBSITE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_WEBSITE%>_2">网站-家庭</option>
                        <option value="<%=Const.CUSTOMER_EXT_INFO_KEY_WEBSITE%>_<%=Const.CUSTOMER_EXT_INFO_TYPE_WEBSITE%>_3">网站-其他</option>
                      </optgroup>
<%
              List<Map<String, Object>> fields = (List<Map<String, Object>>) request.getAttribute("fields");
                if (fields != null) {
%>
                      <optgroup label="自定义字段">
<%                  for (Map<String, Object> field:fields) {%>
                        <option alias="<%=Util.HTMLEncode((String)field.get("CustomerFieldName"))%>" value="<%=Const.FIELD_KEY%>_<%=field.get("CustomerFieldId")%>_<%=field.get("FieldType")%>"><%=Util.HTMLEncode((String)field.get("CustomerFieldName"))%></option>
<%                  }%>
                      </optgroup>
<% }%>
                    </select>
                    </td>
                    <td class="itemString"><%=Util.HTMLEncode(item)%></td>
                  </tr>
<%
        itemIndex++;
      }
    }
%>
                </table>
                <div class="ignore_first_row clearfix">
                  <label><input checked="checked" id="ignoreHeader" name="ignoreHeader" type="checkbox" value="1" />导入时忽略第一行数据</label>
                  <div class="details">
                    <small>如果你的导入文件第一行是描述信息（标题列），请勾选这个选项，在导入时我们会自动把第一行忽略</small>
                  </div>
                </div>
                <div class="submit">
                  <h4>完成导入</h4>
                  <p>如果你确认这些数据匹配正确，请点击下面导入按钮，我们会把您的所有数据导入到系统中。</p>
                  <p class="submit">
                    <a href="#" id="import_button" class="button blue"><i class="fa fa-plus"></i> 立即导入</a>
                    <a href="<%=request.getContextPath()%>/customerimports/new" class="admin">取消，不导入</a>
                  </p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </td>
    </tr>
    </table>
  </div>
  <div id="uploadProgress-popup" class="white-popup mfp-hide">
    <div class="popup-title"><span class="title">导入客户信息</span></div>
    <div class="popup-content">
      <div id="progressbar"></div>
      <p style="text-align:center;padding-top:15px;padding-bottom:5px;">客户信息正在导入中 (<span id="currentUploadNum">1</span>/<%=totalNum%>)...</p>
      <p style="text-align:center">请不要关闭或刷新该页面</p>
    </div>
  </div>

  <form name="resultFrom" id="resultFrom" action="<%=request.getContextPath()%>/customerimports/result" method="post">
    <input type="hidden" name="importId" id="importId" value="">
    <input type="hidden" name="successNum" id="successNum" value="">
    <input type="hidden" name="existNum" id="existNum" value="">
    <input type="hidden" name="existCustomerIds" id="existCustomerIds" value="">
    <input type="hidden" name="errorNum" id="errorNum" value="">
  </form>
  <iframe width="0px" height="0px" id="import_iframe" name="import_iframe" src="about:blank"></iframe>
</body>
</html>